// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  install(Vue, options) {
    Vue.prototype.$getPdf = function(dom, len) {
      return new Promise((resolve, reject) => {
        const title = this.htmlTitle
        // var width = document.querySelector('#pdf-dom').style.width
        let flexBody = document.querySelector('.flex-body')

        let targetDom = document.querySelector('#pdf-dom')

        let platformScrollviewDom = document.querySelector('#platformScrollview')
        let platformScrollviewDomRect = platformScrollviewDom.getBoundingClientRect();
        if(platformScrollviewDom) {
          platformScrollviewDom.style.height = '100%'
          platformScrollviewDom.scrollTo(0, 0)
          platformScrollviewDom.style.overflow = 'visible'
        }

        let seatScrollviewDom = document.querySelector('#seatScrollview')
        let seatScrollviewDomRect = seatScrollviewDom.getBoundingClientRect();

        console.log('seatScrollviewDom ---', seatScrollviewDom)
        if(seatScrollviewDom) {
          seatScrollviewDom.scrollTo(0 ,0)
          seatScrollviewDom.style.overflow = 'visible'
        }

        let seatColIndex = document.querySelector('.seat-column-index')
        console.log('seatColIndex ---', seatColIndex)
        seatColIndex.left = 0
        seatColIndex.top = 0

        let cloneDom = document.querySelector('#pdf-dom').cloneNode(true)
        flexBody.append(cloneDom)

        let targetDomRect = targetDom.getBoundingClientRect()
        cloneDom.style.height = 'auto'
        cloneDom.style.width = targetDom.clientWidth + targetDom.scrollWidth + 'px'
        cloneDom.style.overflow = 'visible'
        cloneDom.style.zIndex = -1
        cloneDom.style.position = 'fixed'
        cloneDom.style.left = 0
        cloneDom.style.top = 0

        console.log('cloneDom ---', cloneDom)
        // console.log('sceolll---',platformScrollviewDomRect.height, seatScrollviewDomRect.height)
        setTimeout(() => {
          html2Canvas(cloneDom, {
            dpi: '192',
            scale: '1',
            // allowTaint: true,
            useCORS: true,
            // x: -(cloneDom.clientWidth / 2) + 50,
            background: '#fff',
          }).then(function(canvas) {
            const imageList = document.getElementsByTagName('img')
            // console.log('imagelist', imageList)
            // for (let i = 0; i < imageList.length; i++) {
            //   getBase64Image(imageList[i].getAttribute('src'), imageList[i])
            // }
            const contentWidth = canvas.width
            const contentHeight = canvas.height
            const pageHeight = contentWidth / 592.28 * 841.89
            let leftHeight = contentHeight
            let position = 0
            const imgWidth = 595.28
            const imgHeight = 592.28 / contentWidth * contentHeight
            const pageData = canvas.toDataURL('image/jpeg', 1.0)
            const PDF = new JsPDF('', 'pt', 'a4')
            if (leftHeight < pageHeight) {
              PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
            } else {
              while (leftHeight > 0) {
                PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                leftHeight -= pageHeight
                position -= 841.89
                if (leftHeight > 0) {
                  PDF.addPage()
                }
              }
            }
            PDF.save(title + '.pdf')

            platformScrollviewDom.style.height = 'auto'
            cloneDom.style.width = '100%'
            cloneDom.style.overflow = 'scroll'
            seatScrollviewDom.style.overflow = 'scroll'
            platformScrollviewDom.style.overflow = 'visible'
            resolve()

            flexBody.removeChild(cloneDom)
          })
        }, 100)
      })
    }
  }
}

function getBase64Image(url, ref) {
  const image = new Image()
  image.src = url
  image.crossOrigin = '*' // 支持跨域图片
  image.onload = function() {
    const base64 = drawBase64Image(image)
    ref.src = base64
  }
}

function drawBase64Image(img) {
  const canvas = document.createElement('canvas')
  canvas.width = img.width
  canvas.height = img.height
  const ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0, img.width, img.height)
  const dataURL = canvas.toDataURL('image/png')
  return dataURL
}
